﻿<!DOCTYPE html>
<html>
<head>
<title>jQuery分类导航</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
</head>
<body>



<div class="header">
	<div class="topM sline clearfix">
	
	<div class="searchBar">
		
		
	</div><!-- searchBar end -->
	</div><!-- sline end -->
	<div class="navigationBar">
		<div class="navigationBarInnel">
			<span>所有分类</span>
			<div class="mainMenuV">
				<a href="">首页</a>
				<a href="" target="_blank">导航二</a>
				<a href="" target="_blank">导航三</a>
				<a href="" target="_blank">导航四</a>
			</div><!-- mainMenuV end -->
		</div><!-- mainMenudl end -->
	</div><!-- navigationBar end -->
</div><!-- header end -->
<div class="of_whole">
<!--tp通栏广告-->

<!--tp通栏广告-->

<!--主体内容区开始-->
	<div id="of_mainBody" class="push_t">
		<!--左侧栏开始-->
		<script>
		$(document).ready(function() {
			var OLeft = $(".searchBar").offset().left;
			var Otop = $(".searchBar").offset().top + $(".searchBar").height() - 3;
			$("#KsmanDisp").css({left: OLeft,top: Otop});//搜索联想的DIV被幻灯片图片盖住。
			$("#cardname").addClass("cardnameV");
			$("#cardname").focus(function() {
				if ($(this).val() != "") {
					$(this).removeClass("cardnameV");
				} else {
					$(this).addClass("cardnameV");
				}
			})
			$("#cardname").keyup(function() {
				$(this).removeClass("cardnameV");
			})
			$("#cardname").blur(function() {
				if ($(this).val() != "") {
					$(this).removeClass("cardnameV");
				} else {
					$(this).addClass("cardnameV");
				}
			})
			$(".mainProNav dl dt").mouseover(function() {
				$(".mainProNav dl").removeClass("dlHover");
				$(this).parent().addClass("dlHover");
			})
			$(".mainProNav").hover(function() {
				$(this).addClass("mainProNavHover");
			},function() {
				$(this).removeClass("mainProNavHover");
				$(".mainProNav dl").removeClass("dlHover");
			})
		});
		</script>
		<div class="side_small tag_line float_l">
			<div class="mainProNav">
            
				<dl class="navM1">
					<dd>
						1
					</dd>
					<dt>栏目一</dt>
				</dl>
                <dl class="navM2">
					<dd>
						2
					</dd>
					<dt>栏目二</dt>
				</dl>
                <dl class="navM3">
					<dd>
						3
					</dd>
					<dt>栏目三</dt>
				</dl>
                <dl class="navM4">
					<dd>
						4
					</dd>
					<dt>栏目四</dt>
				</dl>
                <dl class="navM5">
					<dd>
						5
					</dd>
					<dt>栏目五</dt>
				</dl>
				<dl class="navM6">
					<dd>
						6
					</dd>
					<dt>栏目六</dt>
				</dl>
                
                
                
                
			</div><!-- mainProNav end -->

</div>


</body>
</html>